<template>
    <el-tabs
        type="border-card"
        v-model="activeName"
        tab-position="left"
        class="productBasicInfo-wrap"
    >
        <el-tab-pane name="images" :label="$t('m.navbar.images')">
            <v-images :basicInfo="basicInfo" ref="images" v-if="activeName === 'images'"></v-images>
        </el-tab-pane>
        <el-tab-pane name="document"  :label="$t('m.navbar.document')">
            <document :basicInfo="basicInfo" v-if="activeName === 'document'"></document>
        </el-tab-pane>
        <el-tab-pane name="principal" :label="$t('m.navbar.principal')">
            <principal :basicInfo="basicInfo" v-if="activeName === 'principal'"></principal>
        </el-tab-pane>
        <el-tab-pane name="listting" :label="$t('m.navbar.listting')">
            <listting :basicInfo="basicInfo" v-if="activeName === 'listting'"></listting>
        </el-tab-pane>
        <el-tab-pane name="supplier" :label="$t('m.navbar.supplier')">
            <supplier :basicInfo="basicInfo" v-if="activeName === 'supplier'"></supplier>
        </el-tab-pane>
        <el-tab-pane name="codedInfo" :label="$t('m.navbar.codedInfo')">
            <codedInfo :basicInfo="basicInfo" v-if="activeName === 'codedInfo'"></codedInfo>
        </el-tab-pane>
      <el-tab-pane name="categoryInfo" label="系列信息">
        <categoryInfo :basicInfo="basicInfo" v-if="activeName === 'categoryInfo'"></categoryInfo>
      </el-tab-pane>

    </el-tabs>
</template>
<script>
export default {
    props:{
        basicInfo:Object
    },
    data() {
        return {
            activeName: "images"
        };
    },
    methods: {
    },
    components: {
        vImages: resolve => require(["./tabs-images"], resolve),
        document: resolve => require(["./tabs-document"], resolve),
        principal: resolve => require(["./tabs-principal"], resolve),
        listting: resolve => require(["./tabs-listting"], resolve),
        supplier: resolve => require(["./tabs-supplier"], resolve),
        codedInfo: resolve => require(["./tabs-codedInfo"], resolve),
      categoryInfo: resolve => require(["./tabs-categoryInfo"], resolve)
    }
};
</script>
<style lang="stylus">
.productBasicInfo-wrap {
    display: flex;
    min-height: 290px;
    .el-tabs__header{
        flex 135px 0 0
    }
    .el-tabs__content{
        flex 1
        position: static;
    }
    .el-tabs__header.is-left {
        padding-top: 10px;
        height: auto!important;
    }
    .el-upload-list__item {
        transition: none !important;
    }
}
</style>
